<template>
  <div class="combottom flexC">
    <div class="main flex1">
      <ul>
        <li class="flex bar">
          <p class="flex1 Medium colorF font_s18 textC flex" style=" line-height: 4.875rem;">

            <span class="flex3">社会组织</span>
            <span class="flex1">事项</span>
            <span class="flex1">牵头单位</span>
            <span class="flex1">发起时间</span>
            <span class="flex1">协同单位</span>
            <span class="flex1">协同方式</span>
            <span class="flex1">反馈时间</span>
          </p>
        </li>
      </ul>
      <div style=" overflow: hidden;">
        <ul class="list cursor">
          <li class="flex bar" @click="model = true">
            <p class="flex1 Medium colorF font_s18 textC flex" style="line-height: 4.875rem;">

              <span class="flex3">上海市东方职业技术培训协会</span>
              <span class="flex1">社会阻止违规情况</span>
              <span class="flex1">新区民政局</span>
              <span class="flex1">2019-1-12</span>
              <span class="flex1">新区人社局</span>
              <span class="flex1">联合检查</span>
              <span class="flex1">2019-3-27</span>
            </p>
          </li>
          <!-- <li class="flex bar" @click="model1 = true">
            <p class="flex1 Medium colorF font_s18 textC flex" style="line-height: 4.875rem;">

              <span class="flex3">
                上海市浦东新区陆家嘴社区
                老年人日间照护中心
              </span>
              <span class="flex1">实地检查</span>
              <span class="flex1">新区民政局</span>
              <span class="flex1">2019-3-31</span>
              <span class="flex1">陆家嘴街道</span>
              <span class="flex1">联合检查</span>
              <span class="flex1">2019-5-25</span>
            </p>
          </li> -->
          <li class="flex bar" @click="model1 = true">
            <p class="flex1 Medium colorF font_s18 textC flex" style="line-height: 4.875rem;">

              <span class="flex3">
                上海市浦东新区易达教育培训中心
              </span>
              <span class="flex1">协查函</span>
              <span class="flex1">新区市场监管局</span>
              <span class="flex1">2019-5-5</span>
              <span class="flex1">新区民政局</span>
              <span class="flex1">出具意见</span>
              <span class="flex1">2019-5-17</span>
            </p>
          </li>
          <li class="flex bar" @click="model = true">
            <p class="flex1 Medium colorF font_s18 textC flex" style="line-height: 4.875rem;">

              <span class="flex3">上海市东方职业技术培训协会</span>
              <span class="flex1">社会阻止违规情况</span>
              <span class="flex1">新区民政局</span>
              <span class="flex1">2019-1-12</span>
              <span class="flex1">新区人社局</span>
              <span class="flex1">联合检查</span>
              <span class="flex1">2019-3-27</span>
            </p>
          </li>
          <li class="flex bar" @click="model1 = true">
            <p class="flex1 Medium colorF font_s18 textC flex" style="line-height: 4.875rem;">

              <span class="flex3">
                上海市浦东新区易达教育培训中心
              </span>
              <span class="flex1">协查函</span>
              <span class="flex1">新区市场监管局</span>
              <span class="flex1">2019-5-5</span>
              <span class="flex1">新区民政局</span>
              <span class="flex1">出具意见</span>
              <span class="flex1">2019-5-17</span>
            </p>
          </li>
        </ul>
      </div>
    </div>
    <Modal v-if="model" @hidden="hidden"><img class="bj" src="../../assets/img/comprehensive/components/1.png" alt="" ></Modal>
     <Modal v-if="model1" @hidden="hidden1"><img class="bj" src="../../assets/img/comprehensive/components/2.png" alt="" ></Modal>
  </div>
</template>
<script>
import Modal from '@/components/Modal.vue'

export default {
  name: 'ComBottom',
  components: {
    Modal

  },
  data () {
    return {
      model: false,
      model1: false
    }
  },
  methods: {
    hidden () {
      this.model = false
    },
    hidden1 () {
      this.model1 = false
    }
  }
}
</script>
<style lang="scss" scoped>
.combottom {
  height: 30%;
  width: 75%;
  position: absolute;
  top: 65%;
  right: 0;
  // background: #FF0000;
  overflow: hidden;

  .main {
    margin: 0 1rem;
    background: url(../../assets/img/comprehensive/22.png) no-repeat;
    background-size: 100% 100%;

    .list {
      animation: animation_1 5s linear infinite;
      @keyframes animation_1 {
        from {
          margin-top: 0rem;
        }
        to {
          margin-top: -11.9rem;
        }
      }
    }
    .bar {
      margin: 1rem;
      height: 4.875rem;
      background: url(../../assets/img/comprehensive/23.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .bj{
    position: absolute;
        top: 5%;
        left: 30%;
        width: 40%;
        height: 75%;
  }
}
</style>
